<template>
  <div class="app-container editcss">
    <el-row :gutter="0" class="el-card is-always-shadow el-card__body  card_contents" style="padding: 0px;">
      <el-col class="title_tops">
        <div class="title_tops_t">
          <div class="title_top_E">Record Editor</div>
          <div class="title_top_C">{{ id == 0 ? '新建' : '编辑' }}医护</div>
        </div>
        <div class="title_tops_b" @click="tabGo">
          <img src="../../assets/iconfont/arrow-left-circle.png" alt="" srcset="">
          <span>返回医护管理</span>
        </div>
      </el-col>
      <el-col class="dialog_title_ch_conter_operate  card_contents_tex">
        <div class="editHeld_conter_left">
          <el-upload class="avatar-uploader" :class="untenFun(addFrom.staffAvatarUrl)?'border':''" :show-file-list="false" action="/app/img/up" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <div v-if="addFrom.staffAvatarUrl" class="avatar">
              <img :src="addFrom.staffAvatarUrl">
              <div>点击更换</div>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon" :style="untenFun(addFrom.staffAvatarUrl)?'color: #FE294D;':''"></i>
            <div slot="tip" class="el-upload__tip">建议尺寸：800*800px</div>
          </el-upload>
          <div class="unten" v-if="untenFun(addFrom.staffAvatarUrl)">请上传图片</div>
        </div>
        <div class="editHeld_conter_right">
          <div class="xiugai">
            <div>
              <screenSelect title="医护姓名：" type='input' v-model="addFrom.staffName" :isValue='addFrom.staffName'
                placeholder="请输入医护姓名" @transfer="valueHeld($event, 'staffName')" width='260px' position="top" :isBorder="untenFun(addFrom.staffName)"/>
                <div class="unten" v-if="untenFun(addFrom.staffName)">请输入医护姓名</div>
            </div>
            <div>
              <screenSelect title="联系电话：" type='input' v-model="addFrom.phone" :isValue='addFrom.phone'
                placeholder="请输入联系电话" @transfer="valueHeld($event, 'phone')" width='260px' position="top" :isBorder="untenFun(addFrom.phone)"/>
                <div class="unten" v-if="untenFun(addFrom.phone)">请输入联系电话</div>
            </div>
            <div>
              <screenSelect title="等级权限：" type='select' v-model="addFrom.permissionId" :isValue='addFrom.permissionId'
                placeholder="请选择" @transfer="valueHeld($event, 'permissionId')" :options="permissionoptions" position="top"
                width='247px' style="margin-right: 0;" :isBorder="untenFun(addFrom.permissionId)"/>
                <div class="unten" v-if="untenFun(addFrom.permissionId)">请选择等级权限</div>
            </div>
          </div>
          <div class="xiugai">
            <div>
              <screenSelect title="医护类型：" type='select' v-model="addFrom.type" :isValue='addFrom.type' placeholder="请选择"
                @transfer="valueHeld($event, 'type')" :options="typeoptions" position="top" width='260px' :isBorder="untenFun(addFrom.type)"/>
                <div class="unten" v-if="untenFun(addFrom.type)">请选择医护类型</div>
            </div>
            <div>
              <screenSelect title="医护职称：" type='select' v-model="addFrom.title" :isValue='addFrom.title' placeholder="请选择"
                @transfer="valueHeld($event, 'title')" :options="titleoptions" position="top" width='260px' :isBorder="untenFun(addFrom.title)"/>
                <div class="unten" v-if="untenFun(addFrom.title)">请选择医护职称</div>
            </div>
            <div>
              <screenSelect title="医护状态：" type='select' v-model="addFrom.status" :isValue='addFrom.status' placeholder="请选择"
                @transfer="valueHeld($event, 'status')" :options="statusoptions" position="top" width='225px' :isBorder="untenFun(addFrom.status)"/>
                <div class="unten" v-if="untenFun(addFrom.status)">请选择医护状态</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col class="card_contents_footer">
        <el-button type="primary" class="ch_button_seav" @click="submit">
          <img class="ch_button_img_seav" src="../../assets/iconfont/icon-seavicon.png" alt="" srcset="">
          <div>提交</div>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import construction from '@/components/construction/index.vue'
import screenSelect from '@/components/screenSelect/index.vue'
import smallCard from '@/components/smallCard/index.vue'
import {getPermissionDeptList} from '@/api/medicalauthority'
import {getStaffTypeList,getStaffTitleList} from '@/api/common'
import {getStaffAdd,getStaffUpdate,getStaffDetail} from '@/api/medic'
import {
  mapGetters
} from 'vuex'
export default {
  name: "Field",
  components: {
    construction,
    screenSelect,
    smallCard
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ])
  },
  data() {
    return {
      viewHeld: false,
      editHeld: false,
      familyHeld: false,
      provinceName: '',
      institutionName: '',
      typeoptions: [],
      titleoptions:[],
      statusoptions: [
        {
          value: 0,
          label: '在职 '
        }, {
          value: 1,
          label: '停职'
        }
      ],
      imageUrl: '',
      id: 0,
      permissionoptions:[],
      addFrom: { deptId: this.$route.params.deptId ,staffAvatarUrl:''},
      isUnten: false
    };
  },
  mounted() {
    this.id = this.$route.params.id
    if(this.$route.params.id!=0){
      this.getStaDetail()
    }
    console.log(this.$route.params);
    this.getPDList()
  },

  methods: {
    untenFun(data) {
      if (this.isUnten) {
        if (data == undefined) {
          return true
        } else {
          if (data == '' && data != '0') {
            return true
          } else {
            return false
          }
        }

      } else {
        return false
      }

    },
    getStaDetail(){
      let that = this
      const loading = that.$loading({
        lock: true,
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getStaffDetail(this.$route.params.id).then(res=>{
        if(res.code == 200){
          this.addFrom = res.data.staff
          loading.close()
        }
      })
    },
    getPDList(){
      getPermissionDeptList(this.$route.params.deptId).then(res=>{
        if(res.code == 200){
          res.data.permissionList.map(item=>{
            item.label = item.title
            item.value = item.permissionId
          })
          this.permissionoptions = res.data.permissionList
        }
      })
      getStaffTypeList().then(res=>{
        if(res.code == 200){
          this.typeoptions = res.data.typeOptions
        }
      })
      getStaffTitleList().then(res=>{
        if(res.code == 200){
          this.titleoptions = res.data.titleOptions
        }
      })
    },
    tabGo() {
      this.$router.go(-1)
    },
    submit() {
      let that = this
      that.isUnten = true
      for (let key in that.addFrom) {
        if (key != 'staffAvatarUrl') {
          if (that.addFrom[key] === '' || that.addFrom[key] === undefined) {
              console.log(key);
              return false
            }
        }
      }
      if (this.id == 0) {
        // 新建逻辑
        getStaffAdd(this.addFrom).then(res=>{
          if(res.code == 200){
            this.$Toast('添加成功')
            this.tabGo()
          }else{
            this.$Toast(res.message)
          }
        })
      } else {
        // 编辑逻辑
        getStaffUpdate(this.addFrom).then(res=>{
          if(res.code == 200){
            this.$Toast('修改成功')
            this.tabGo()
          }else{
            this.$Toast(res.message)
          }
        })
      }
    },

    valueHeld(childParam, fatherparam) {
      this.isUnten = false
      this.addFrom[fatherparam] = childParam
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code==200){
        this.addFrom.staffAvatarUrl = res.data.imgUrl
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }
}
</script>
<style lang="scss" scoped>
.editcss {
  width: 100%;
}

.card_contents {
  height: calc(100% - 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .card_contents_tex {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px;
  }

  .card_contents_footer {
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #EFEFEF;
  }
}

.content_h {
  height: 149px;
  border-radius: 5px;
  padding: 0px;
}

.title_top {
  height: 79px;
  border-bottom: 1px solid #EFEFEF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 20px;
}

.title_tops {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  height: 79px;
  border-bottom: 1px solid #EFEFEF;

  .title_tops_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .title_tops_b {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    cursor: pointer;

    img {
      width: 24px;
      height: 24px;
      margin-right: 5px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      color: #000;
    }
  }
}

.screen_case_title {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  margin-right: 35px;
}

.title_top_E {
  font-size: 12px;
  font-weight: 400;
  color: #9898989E;
}

.title_top_C {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

::v-deep .ch_button_seav {
  padding: 7px 27px;

  span {
    display: flex;
    align-items: center;
    justify-content: center;

    div {
      font-size: 16px;
      font-weight: 400;
      margin-left: 10px;
    }
  }
}

.ch_button_img_seav {
  width: 24px;
  height: 24px;
}

.ch_button_img {
  width: 16px;
  height: 16px;
}

.dialog_title_ch_conter_operate {
  padding: 24px 35px;
  // border: 1px solid #EBEBEB;
  border-radius: 2px;
  display: flex;
  // align-items: center;
}


/*
  编辑
  */
.editHeld_conter_left {
  white-space: nowrap;
  margin-right: 70px;
  text-align: center;
}

.editHeld_conter_right {
  flex: 1;

  .el-row {
    margin-bottom: 45px;
  }
}

::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
}
::v-deep .editHeld_conter_left .border .el-upload {
    border: 1px solid #FE294D;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
// ::v-deep  .avatar-uploader .el-upload:hover {
//   border-color: #409EFF;
// }
.editHeld_conter_left .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  line-height: 160px;
  text-align: center;
}

.editHeld_conter_left .avatar {
  width: 160px;
  height: 160px;
  display: block;
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000066;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFFAA;
  }
}
</style>
